<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bookshelf</title>
</head>

<body>
    <div id="bookshelfConfigurationPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input">
        <div data-role="content">
            <div class="content-primary">
                <form id="bookshelfConfigurationForm">
                    <div class="inputContainer">
                        <label class="inputLabel inputLabelUnfocused" for="comicVineApiKey">Comic Vine API Key</label>
                        <input id="comicVineApiKey" name="ComicVineApiKey" type="text" is="emby-input" required />
                        <div class="fieldDescription"> Comic Vine API Key. Get one <a href="https://comicvine.gamespot.com/api/" target="_blank">here</a>.</div>
                    </div>
                    <div>
                        <button is="emby-button" type="submit" class="raised button-submit block emby-button">
                            <span>Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript">
            var TemplateConfig = {
                pluginUniqueId: '9c4e63f1-031b-4f25-988b-4f7d78a8b53e'
            };

            document.querySelector('#bookshelfConfigurationPage')
                .addEventListener('pageshow', function () {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(TemplateConfig.pluginUniqueId).then(function (config) {
                        document.querySelector('#comicVineApiKey').value = config.ComicVineApiKey;
                        Dashboard.hideLoadingMsg();
                    });
                });

            document.querySelector('#bookshelfConfigurationForm')
                .addEventListener('submit', function (e) {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(TemplateConfig.pluginUniqueId).then(function (config) {
                        config.ComicVineApiKey = document.querySelector('#comicVineApiKey').value;
                        ApiClient.updatePluginConfiguration(TemplateConfig.pluginUniqueId, config).then(function (result) {
                            Dashboard.processPluginConfigurationUpdateResult(result);
                        });
                    });

                    e.preventDefault();
                    return false;
                });
        </script>
    </div>
</body>

</html>
